import React from 'react';
import { View, Text, StyleSheet } from 'react-native';
import { useGame } from '../contexts/GameContext';

const UnitsDisplay = () => {
  const { state } = useGame();
  
  if (!state.currentPlayer) {
    return null;
  }

  const playerUnits = state.units.filter(
    unit => unit.owner === state.currentPlayer?.id
  );

  const unitCounts = playerUnits.reduce((acc, unit) => {
    acc[unit.type] = (acc[unit.type] || 0) + 1;
    return acc;
  }, {} as Record<string, number>);

  return (
    <View style={styles.container}>
      <Text style={styles.title}>我的部队</Text>
      <View style={styles.unitList}>
        {Object.entries(unitCounts).map(([type, count]) => (
          <View key={type} style={styles.unitItem}>
            <Text>{type}: {count}</Text>
          </View>
        ))}
      </View>
    </View>
  );
};

const styles = StyleSheet.create({
  container: {
    marginVertical: 10,
    padding: 10,
    borderWidth: 1,
    borderRadius: 5
  },
  title: {
    fontWeight: 'bold',
    marginBottom: 5
  },
  unitList: {
    flexDirection: 'row',
    flexWrap: 'wrap'
  },
  unitItem: {
    marginRight: 10,
    marginBottom: 5
  }
});

export default UnitsDisplay;
